<template>
    <div > 
        <Search></Search>
        <div class="left" @click="wyToast">
            <van-sidebar  v-model="activeKey" class="left_div">
                <van-sidebar-item
                v-for="(item,index) in list" 
                :key="item.id"  
                :to="{
                    name:'wy_right',
                    query:{
                        id:item.id,
                        name:item.name,
                        goodsList:item.goodsList, 
                    }
                }"  
                :title="item.name" 
                 v-show="index<9"
                /> 
            </van-sidebar>
        </div>
        
        <div class="right"> 
            <router-view>
                <h2>没有内容时显示</h2>
            </router-view>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import {Toast} from 'vant'
import Search from '../pages/Search'
    export default {
        name:'classification', 
        components: {
            Search
        },
        data() {
            return { 
                activeKey: 0,
                list:[]
            }
        },
        methods:{ 
            wyToast(){ 
                Toast.loading({
                message: '加载中...',
                forbidClick: true,
                });
            }
        },
       mounted(){
            console.log("mounted被调用了");
            axios.get(`http://localhost:8080/wy/getDB`).then(
                res=>{  
                    console.log("接受成功鸟~");   
                    this.list=res.data.categoryList 
                    console.log(this.list);
                },
                er=>{
                    console.log("不准看",er.message);  
                }
            )
            axios.get(`http://192.168.33.238:8080/wy/getDB`).then(
                res=>{  
                    console.log("接受成功鸟~");   
                    this.list=res.data.categoryList 
                    console.log(this.list);
                },
                er=>{
                    console.log("不准看",er.message);  
                }
            )
            console.log(this);
        }

    }
</script>


<style lang="less" scoped> 
    a{
        list-style: none;  
        color: black;
        text-decoration:none
    } 
    .left{ 
        list-style: none;
        width: 20%; 
        margin-top: 50px;
        .left_div{
            width: 100%; 
        }
        position: absolute;
        top: 0;
        left: 0;
    }
    .right{
        width: 80%;   
        position: absolute;
        top: 50px;
        right: 0;
    }
</style>